<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>单个节目</title>
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/lib/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
    <link rel="stylesheet" th:href="@{/lib/daterangepicker/daterangepicker.css}">
</head>

<body>

<div class="app-page">

    <div class="app-page-content">

        <div class="app-card">
            <div class="app-card-body">
                <div class="app-card-body-con">
                    <!-- 过滤器 -->
                    <form class="filter">
                        <div class="filter-item form-item row">
                            <div class="label"><label>节目名称</label></div>
                            <div class="flex1">
                                <input type="text" placeholder="节目名称" name="programName" th:value="${programName}">
                            </div>
                        </div>

                        <div class="filter-item form-item row">
                            <div class="label"><label>节目ID</label></div>
                            <div class="flex1">
                                <input type="text" placeholder="节目ID" name="programId" th:value="${programId}">
                            </div>
                        </div>

                        <div class="filter-item form-item row">
                            <div class="filter-btn z-df">
                                <button class="z-btn z-primary">查询</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="app-card">
            <div class="app-card-body">
                <div class="app-card-body-con">

                    <div class="z-btn-group">
                        <button class="j-btn-control z-btn z-default" id="export">导出</button>
                    </div>

                    <table class="z-table">
                        <thead>
                        <th>
                            <input type="checkbox" class="input j-checkbox-all">
                        </th>
                        <th>机器码</th>
                        <th>创建时间</th>
                        <th>下载完成时间</th>
                        <th>过期时间</th>
                        <th>下载状态</th>
                        <th>所属分组</th>
                        <th>省份</th>
                        <th>城市</th>
                        <th>区/县</th>
                        <th>详细地址</th>
                        </thead>
                        <tbody>
                        <tr th:each="program : ${result}">
                            <td>
                                <input type="checkbox" class="input j-checkbox">
                            </td>
                            <td>
                                <span th:text="${program.deviceNum}"></span>
                            </td>
                            <td>
                                <span th:text="${program.addTime}"></span>
                            </td>
                            <td>
                                <span th:text="${program.updateTime}"></span>
                            </td>
                            <td>
                                <span th:text="${program.overdueTime}"></span>
                            </td>
                            <td th:if="${program.downloadStatus != '' && program.downloadStatus != null}">
                                <span th:text="${program.downloadStatus}"></span>
                            </td>
                            <td th:if="${program.downloadStatus == '' || program.downloadStatus == null}">
                                <span>未开始</span>
                            </td>
                            <td>
                                <span th:text="${program.deviceGroup}"></span>
                            </td>
                            <td>
                                <span th:text="${program.province}"></span>
                            </td>
                            <td>
                                <span th:text="${program.city}"></span>
                            </td>
                            <td>
                                <span th:text="${program.area}"></span>
                            </td>
                            <td>
                            <span th:text="${program.detailAddress}"></span>
                        </td>
                        </tr>
                        </tbody>
                    </table>

                    <!-- 分页 -->
                    <div class="pagination z-pat z-fr"></div>

                </div>
            </div>
        </div>
    </div>

</div>

<script th:src="@{/lib/jquery.min.js}"></script>
<script th:src="@{/lib/layer-v3.1.1/layer/layer.js}"></script>
<script th:src="@{/js/popup.js}"></script>
<script th:src="@{/js/form.js}"></script>
<script th:src="@{/js/admin/app.js}"></script>
<script th:src="@{/js/pagination.js}"></script>
<script th:src="@{/lib/daterangepicker/moment.min.js}"></script>
<script th:src="@{/lib/daterangepicker/daterangepicker.js}"></script>
<script>
    var context = $("meta[name='ctx']").attr("content") || '';
    //处理分页
    var pageNum = [[${pageNum}]];
    var pageSize = [[${pageSize}]];
    var total = [[${total}]];
    var programId = '[[${programId}]]';
    var programName = '[[${programName}]]';
    $(function () {
        initDatePicker()
    })

    function initDatePicker() {
        //初始化时间选择
        $('input[name="dateRange"]').daterangepicker({
            "showDropdowns": true,
            "showWeekNumbers": true,
            "showISOWeekNumbers": true,
            "autoApply": true,
            "autoUpdateInput": false,
            "opens": "right",
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            },

            "locale": {
                "format": "YYYY/MM/DD",
                "separator": "-",
            },
            "showCustomRangeLabel": false,
            "alwaysShowCalendars": true,
            // "startDate": moment().subtract(6, 'days'),
            // "endDate": moment(),
            "maxDate": moment()
        }, function (start, end, label) {

            console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
        }).on('apply.daterangepicker', function (ev, picker) {
            $(this).val(picker.startDate.format('YYYY/MM/DD') + '-' + picker.endDate.format('YYYY/MM/DD'));
        });

    }

    // 加载select联动内容
    $('[name="searchType"] option').each(function (index, element) {
        if ((App.query.searchType === undefined && index === 0) || App.query.searchType == $(this).val()) {
            $('.j-option-switch .content').html($(".search").children('div').eq(index).html())
        }
    })

    // 从URL加载搜索数据
    $(".filter").formLoad(App.query);

    // 后台渲染分页 - 补全url参数(后台传参可以忽略)
    $(".z-page a").each(function () {
        $(this).attr("href", $(this).attr("href") + location.search)
    });

    // 获取表格中选择的ID
    function getSelecteId() {
        let temp = [];
        $('tbody [type="checkbox"]').each(function (index, element) {
            if (element.checked == true) {
                temp.push($(this).parents('tr,.tr').data('id'));
            }
        })

        return temp.join(',');
    }

    var pagination = new Pagination(".pagination", {
        pageIndex: pageNum, // 当前页数
        pageSize: pageSize, // 每页数量
        count: total, // 总条数
        maxButtonCount: 5, // 分页按钮数量(可选)
        // 分页切换事件
        onPageChanged: function (pageIndex) {
            var param = createQueryParam(pageIndex, pageSize);
            window.location.href = context + "/ckReport/allProgramReport" + isParamOk(param) ? "?" + param : "";
        }
    })

    function isParamOk(param) {
        if (null == param) {
            return false;
        }
        if ('' === param) {
            return false;
        }
        if (undefined === param) {
            return false;
        }
        return true;
    }

    /**
     * 拼接请求参数
     * @param pageNum
     * @param pageIndex
     */
    function createQueryParam(pageIndex, pageSize) {
        var param = '';
        if (isParamOk(pageSize)) {
            param += "&pageSize=" + pageSize;
        }
        if (isParamOk(pageIndex)) {
            param += "&pageNum=" + pageIndex;
        }
        if (isParamOk(programId)) {
            param += "&programId=" + programId;
        }
        if (isParamOk(programName)) {
            param += "&programName=" + programName;
        }
        if (isParamOk(param)) {
            param = param.substring(1);
        }
        return param;
    }

    //导出excel
    $('#export').click(function () {
        var url = context + "/cpReport/singleProgramExport";
        var paramStr = createQueryParam(null, null);
        if (paramStr !== "") {
            url = url + "?" + paramStr;
        }
        window.location.href = url;
    });
</script>
</body>

</html>